<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta
            name="viewport"
            content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no"
        />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <title>舒尔特表训练</title>

        <link rel="stylesheet" type="text/css" href="/asserts/style/global.s.css" />
        <link rel="stylesheet" type="text/css" href="/asserts/style/index.s.css" />
        <link rel="stylesheet" type="text/css" href="./resources/style.s.css" />
        <script type="text/javascript" src="/node_modules/requirejs/require.js"></script>
        <script type="text/javascript" src="/configs/using.js"></script>
        <script type="text/javascript" src="/configs/using.js"></script>

        <script type="text/javascript">
            // 在线: 舒尔特方格训练: https://schultegrid.com/
            (function () {
                var usingPaths = ["jquery", "pages/memory/ShultGrid", "artTemplate", "logic/page/iconsvg"];
                require(usingPaths, function ($, func, artTemplate, iconsvg) {
                    iconsvg.default.onload();

                    var Span_minute = $("#IDHTML_Span_minute");
                    var Span_second = $("#IDHTML_Span_second");
                    var Span_millisecond = $("#IDHTML_Span_millisecond");

                    var config = {
                        processCallback: function (sign) {
                            // 0:结束游戏
                            if (sign === 0) {
                                $(".assembly_end").show();
                                $(".assembly_start").hide();
                            }
                            // 1:开始游戏
                            if (sign === 1) {
                                $(".assembly_end").hide();
                                $(".assembly_start").show();
                            }
                        },
                        drawTimerCallback: function (minute, second, millisecond) {
                            Span_minute.html(minute.toString().padStart(2, "0"));
                            Span_second.html(second.toString().padStart(2, "0"));
                            Span_millisecond.html(millisecond.toString().padStart(3, "0").substring(0, 2));
                        },
                        drawTableCallback: function (tables) {
                            var tempalte = $("#IDHTML_Template_ShultGrid_table_row");
                            var html = $(
                                artTemplate.render(tempalte.html(), {
                                    tables: tables,
                                })
                            );
                            var box = $("#IDHTML_Box_ShultGrid_table");
                            box.empty();
                            box.append(html);
                        },
                        notifyCallback: function (sign, message) {
                            var sign_msg = "";
                            switch (sign) {
                                case 0:
                                    sign_msg = "成功";
                                    break;
                                case 1:
                                    sign_msg = "失败";
                                    break;
                                case 2:
                                    sign_msg = "警告";
                                    break;
                                default:
                                    sign_msg = "<未知>:" + sign;
                                    break;
                            }
                            $.messager.show({
                                title: "游戏提示: " + sign_msg,
                                msg: message,
                                timeout: 1000,
                                showType: "slide",
                            });
                        },
                    };

                    window.game = new func.Game(config);
                    game.ReConfigXY(3, 3);
                    game.ReDrawTables();

                    window.selected_grid = function (el) {
                        var value = $(el).attr("data-number");
                        if (game.SelectItem(parseInt(value))) {
                            $("#IDHTML_Box_ShultGrid_table").find(".grid").removeClass("selected");
                            $(el).addClass("selected");
                        }
                    };

                    var regularChessboards = game.GetIRegularChessboards();
                    set_page_choice();
                    function set_page_choice() {
                        var tempalte = $("#IDHTML_Template_ShultGrid_choice");
                        var box = $("#IDHTML_Box_ShultGrid_choice");
                        box.empty();
                        for (var index = 0; index < regularChessboards.length; index++) {
                            var c = regularChessboards[index];
                            var html = $(
                                artTemplate.render(tempalte.html(), c)
                            );
                            box.append(html);
                        }
                        if (regularChessboards.length > 0) {
                            var x = regularChessboards[0].x;
                            var y = regularChessboards[0].y;
                            game.ReConfigXY(3, 3);
                            game.ReDrawTables();
                            set_page_score_content(x, y);
                        }
                    }
                    function selected_config(el) {
                        var x = parseInt($(el).attr("data-x"));
                        var y = parseInt($(el).attr("data-y"));
                        game.ReConfigXY(x, y);
                        game.ReDrawTables();
                        set_page_score_content(x, y);
                    }
                    window.selected_config = selected_config;
                    function set_page_score_content(x, y) {
                        var config = null;
                        for (var index = 0; index < regularChessboards.length; index++) {
                            var c = regularChessboards[index];
                            if (c.x == x && c.y == y) {
                                config = c;
                                break;
                            }
                        }
                        if (!config) {
                            return;
                        }
                        var tempalte = $("#IDHTML_Template_ShultGrid_score_content");
                        game.GenerateRegularChessboardScoreDescribe(config);
                        console.log('config:', config);
                        var html = $(
                            artTemplate.render(tempalte.html(), config)
                        );
                        var box = $("#IDHTML_Box_ShultGrid_score_content");
                        box.empty();
                        box.append(html);
                    }
                });
            })();
        </script>
    </head>
    <body>
        <div class="panel_box ShultGrid LevitationZone_Right assembly_end">
            <div class="closeBtn iconsvg"
                src="../../asserts/icons/svgs/angles-right-solid.svg"
                onclick="$(this).parents('.ShultGrid').toggleClass('hide');"></div>
            <div class="introduce">
                <div class="example">
                    <img class="img" src="./images/example_ShultGrid.png" />
                </div>
                <div class="describe">
                    <span class="span title">舒尔特方格介绍</span>
                    <span class="span"
                        >舒尔特方格是美国神经心理医生舒尔特发明的一种用于训练注意力的游戏，训练历史已有数十年，效果非常显著。</span
                    >
                    <span class="span"
                        >舒尔特方格是由n*n个数字格子组成的正方形表格，练习者应当从1开始依次点击页面上所有的方格，点击完毕即为胜利。</span
                    >
                    <span class="span title">成绩判定</span>
                    <span class="span">以完成时间作为判断标准，完成时间越短，成绩越好。</span>
                    <span class="span">每局游戏结束后都将给出完成游戏所用的时间，并且可以提交成绩至排行榜。</span>
                </div>
            </div>
            <script id="IDHTML_Template_ShultGrid_choice" type="text/html">
                <span class="item" onclick="selected_config(this);" data-x="{{x}}" data-y="{{y}}">{{x}} x {{y}}</span>
            </script>
            <div id="IDHTML_Box_ShultGrid_choice" class="choice"></div>
        </div>
        <div class="panel_box ShultGrid LevitationZone_Left assembly_end">
            <div class="closeBtn iconsvg"
                src="../../asserts/icons/svgs/angles-right-solid.svg"
                onclick="$(this).parents('.ShultGrid').toggleClass('hide');"></div>
            <div class="introduce">
                <div class="describe">
                    <span class="span title">游戏规则</span>
                    <span class="span">1: 点击 [ 开始游戏 ] 按钮</span>
                    <span class="span">2: 依次点击 1 ~ 16</span>
                    <span class="span">3: 游戏胜利</span>
                    <span class="span title">评分</span>
                    <script id="IDHTML_Template_ShultGrid_score_content" type="text/html">
                        <span class="span title">{{x}}x{{y}}</span>
                        {{ each scores m index}}
                        <span class="span">{{ m.describe }}</span>
                        {{ /each }}
                    </script>
                    <div id="IDHTML_Box_ShultGrid_score_content" class="score_content"></div>
                </div>
            </div>
        </div>
        <div class="panel_box ShultGrid main">
            <div class="time">
                <span class="value minute" id="IDHTML_Span_minute">00</span>
                <span class="value">分钟</span>
                <span class="value second" id="IDHTML_Span_second">00</span>
                <span class="value">秒</span>
                <span class="value millisecond" id="IDHTML_Span_millisecond">00</span>
            </div>
            <script id="IDHTML_Template_ShultGrid_table_row" type="text/html">
                {{ each tables row index}}
                <div class="row">
                    {{ each row grid index}}
                    <div class="grid" onclick="selected_grid(this);" data-number="{{ grid }}">
                        <span class="number">{{ grid }}</span>
                    </div>
                    {{ /each }}
                </div>
                {{ /each }}
            </script>
            <div id="IDHTML_Box_ShultGrid_table" class="table"></div>
            <div class="control">
                <div class="button start assembly_end" onclick="game.ReDrawTables(); game.Start();">开始游戏</div>
                <div class="button restart" onclick="game.Start();">重新开始</div>
            </div>
        </div>
    </body>
</html>
